<template>

    <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'人员列表'" :autoBack="true" leftIconColor="$uni-text-color" :bgColor="'#ffffff'" :titleStyle="{ color: '$uni-text-color', fontSize: '32rpx', fontWeight: '600' }">
        <!-- 最大盒子 -->
        <view class="max_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
            <!-- 搜索 && 是否结算 盒子 -->
            <view class="top_box">
                <!-- 搜索组件 -->
                <view class="area search_box">
                    <s-search-keyword :border="'1px solid rgba(0, 56, 247, 0.3)'" :placeholder="'搜索员工'" @searchKeyWord="searchKeyWord"></s-search-keyword>
                </view>
                <view class="area blank_box" v-if="state <= 1">
                    <view class="blank_box_btn" @tap="editpop('salary')">
                        <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_piliangshezhi.png`" mode="aspectFill" />
                        <view>批量设置金额</view>
                    </view>
                </view>
                <!-- 列表 -->
                <view class="add_area area">
                    
                    <!-- 循环内容 class="scroll_box" -->
                    <scroll-view scroll-y :style="state <= 1 ? { height: `calc(100vh - ${safeAreaInsets?.top + 290}px)`} : { height: `calc(100vh - ${safeAreaInsets?.top + 130}px)` , marginTop:'40rpx'}" v-if="personnelsList.length > 0" @scrolltolower='listScrolltolower'>

                            <view class="list_item" v-for="(item,index) of personnelsList" :key="index">
                                <!-- 选择按钮 -->
                                <view class="select_image" @tap="moreSelect(item.id)" v-if="state <= 1">
                                    <image v-if="isSelected(item.id)" :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_check.png`"  mode="scaleToFill"/>
                                    <image v-else :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_checkfor.png`"  mode="scaleToFill"/>
                                </view>
                                <!-- 头像 -->
                                <view class="head_box">
                                    <image :src="`${baseUrl}` + item.user.avatar" mode="aspectFill" />
                                </view>
                                <!-- 信息盒子 -->
                                <view class="message_box">
                                    <view class="message_title">{{ item.user.nickname }}</view>
                                    <view class="message_identity">{{ item.user.authentication.identity_id }} {{ item.user.gender == 0 ? '女' : '男' }}</view>
                                </view>
                                <!-- 金额 -->
                                <view class="add_right">
                                    <view class="gold_coin">
                                        <text>￥</text>
                                        <view>
                                            <u-input type="number" :disabled="state > 1 ? true : false" :fontSize="'12px'" :color="state > 1  ? '#666666' : '#0038F7'" v-model="item.salary" @blur="money_change($event,item)"></u-input>
                                        </view>  
                                    </view>
                                </view>
                            </view>
                        <view v-if="total > 20">
                            <s-loadmore-gather :current_page="current_page" :last_page="last_page" ref="loadmoreRef"></s-loadmore-gather>
                        </view>
                    </scroll-view>
                    <view v-else :style="state <= 1 ? { height: `calc(100vh - ${safeAreaInsets?.top + 290}px)`} : { height: `calc(100vh - ${safeAreaInsets?.top + 130}px)` , marginTop:'40rpx'}" class="empty">
                        <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容"></u-empty>
                    </view>
                </view>
            </view>
            <!-- 底部占位盒子 -->
            <view class="end_box" v-if="state <= 1">
                <!-- 全选按钮盒子 -->
                <view class="check_all_box">
                    <!-- 全选按钮 -->
                    <view class="check_all_button" @tap="checkAllInteraction">
                        <view class="select_image">
                            <image v-if="checkAll == 1" :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_check.png`" mode="scaleToFill" />
                            <image v-else :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_checkfor.png`" mode="scaleToFill" />
                        </view>
                        <view>全选</view>
                    </view>
                    <!-- 已选择 -->
                    <view class="selected_box">
                        <view class="number_people">已选择  {{ selectedIds.length }}/{{ total }} 名员工</view>
                    </view>
                </view>
                <view class="placeholder"></view>
            </view>
        </view>
        <!-- 底部保存按钮 -->
        <!-- <view v-if="state <= 1">
            <s-button @leftNetWork="cancel" @rightNetWork="definiteModification" :leftWidth="'50%'" :rightWidth="'50%'" :type="'twobutton'" :oneText="'取消'" :twoText="'确定修改'" />
        </view> -->
        <view v-if="state <= 1">
            <s-button @netWork="cancel" :text="'取消'"></s-button>
        </view>
        <!-- 设置金额弹出层 -->
        <s-public-models :show="popshows" :dialogStatus='false' :imagesucceedSrc="dataToinformaion.imageSrc" :subtitle="dataToinformaion.subtitle"  :distinction="dataToinformaion.distinction" :hint="dataToinformaion.hint" @cancel="manhourClose" @affirm="manhourSubmit">
        </s-public-models>
    </s-layout>
</template>
<script setup>
    import { baseUrl } from '@/sheep/config';
    import { onLoad, onShow } from "@dcloudio/uni-app";
    import { ref,watch } from "vue";
    import sheep from "@/sheep";
    const { safeAreaInsets } = uni.getSystemInfoSync();
    const schedule_id = ref()
    const character_string_data = ref()
    const state = ref()
    const man_agent_salary = ref()
    const woman_agent_salary = ref()
    onLoad((options) => {
        
        if(options.task_name){
            schedule_id.value = options.schedule_id
        
        }else{
            character_string_data.value = JSON.parse(options.item)
            man_agent_salary.value = character_string_data.value.man_agent_salary
            woman_agent_salary.value = character_string_data.value.woman_agent_salary
            // agent_salary.value = character_string_data.value.agent_salary
            schedule_id.value = character_string_data.value.id
            state.value = character_string_data.value.state
          
        }
        schedule_userList()
    });
    onShow(() => {
        
    })
    
    // 多选  total.value 总共多少条数据
    const allList = ref([])
    const moreSelect = (id) => {
        const index = selectedIds.value.indexOf(id);
        if (index === -1) {
            selectedIds.value.push(id);
            if (selectedIds.value.length == allList.value.length) {
            checkAll.value = 1
            }
        } else {
            selectedIds.value.splice(index, 1);
            if (selectedIds.value.length !== allList.value.length) {
            checkAll.value = 0
            }
        }
    }
    const isSelected = (id) => {
        return selectedIds.value.includes(id);
    }
    // 全选
    const checkAll = ref(0)
    const selectedIds = ref([])
    // 全选交互逻辑
    const checkAllInteraction = () => {
        if (checkAll.value === 0) {
            let set = new Set(allList.value.map(item => item));
            selectedIds.value = Array.from(set);
            checkAll.value = 1;
        } else {
            selectedIds.value = [];
            checkAll.value = 0;
        }
    }

    // 封装人员列表接口
    const personnelsList = ref([])
    const page = ref(1)
    const total = ref()
    const current_page = ref()
    const last_page = ref()
    const schedule_userList = async () => {
        let params = {
            schedule_id:schedule_id.value,
            // schedule_id:164,
            page:page.value,
            filter: JSON.stringify({
                'user.nickname': key_word.value,
            }),
            op: JSON.stringify({
                'user.nickname': 'LIKE',
            }),
        }
        const res = await sheep.$api.agency.schedule_userListAPI(params)
        personnelsList.value = [...personnelsList.value,...res?.data.rows]
        if(allList.value.length < 1) {
            personnelsList.value.forEach(item => {
                allList.value.push(item.id)
            });
        } else {
            res.data.rows.forEach(item => {
                allList.value.push(item.id)
            })
            if(checkAll.value == 1) {
                res.data.rows.forEach(item => {
                selectedIds.value.push(item.id)
            })
            }
        }
        total.value = res.data.total
        current_page.value = res.data.current_page
        last_page.value = res.data.last_page
    }

    const loadmoreRef = ref()
    const listScrolltolower = () => {
        loadmoreRef.value.PopupScrolltolower()
        if (current_page.value < last_page.value) {
            page.value += 1;
        } else {
            return;
        }
        schedule_userList()
    }

    // 搜索
    const key_word = ref()
    const searchKeyWord = (e) => {
        key_word.value = e
        page.value = 1
        personnelsList.value = []
        schedule_userList()
    }



    // 批量设置金额
    const man_hour = ref()
    const salary =ref()
    //工时弹窗
    const popshows = ref(false)
    const dataToinformaion = ref({
        subtitle: '批量设置金额',
        imageSrc: '',
        hint:'',
        distinction:''
    })

    // 批量修改金额弹窗
    const editpop = (e)=>{
        if(selectedIds.value.length !== 0 || checkAll.value == 1){
            popshows.value = true
            dataToinformaion.value.subtitle = '批量设置金额'
            dataToinformaion.value.hint =  '批量设置会覆盖已修改的员工金额'
            dataToinformaion.value.distinction ='salary'
            dataToinformaion.value.imageSrc = '/uploads/uniapp_image/staff/piliangshezhi_img_bg2.png'
        }else{
            sheep.$helper.toast('请选择员工,再进行操作');
        }
    }

    // 取消按钮
    const manhourClose = (e) =>{
        man_hour.value = ''
        salary.value =''
        popshows.value = e
    }

    // 提交批量更改按钮 此处参数 e 为输入值 参数 i 为判断是什么值 如果为 salary 为批量设置金额 如果为 man_hour 则是批量设置工时
    const manhourSubmit =(e,i)=> {
        salary.value = e
        amendEdit()
        // 限制
        // console.log('1',e);
        // console.log('2',agent_salary.value);
        // if(Number(e) > Number(agent_salary.value)) {
        //     sheep.$helper.toast(`修改的金额不能超过${agent_salary.value}`);
        // } else {
            
        // }
        
    }
 // 金额输入框
    const totalids = ref()
    const money_change = (e, item) => {
        salary.value =  e
        totalids.value = item.id
        uni.$u.throttle(() => {
            amendEdit()
        },500)
        // 限制
        // if(Number(e) > Number(agent_salary.value)) {
        //     sheep.$helper.toast(`修改的金额不能超过${agent_salary.value}`);
        //     item.salary = agent_salary.value
        // } else {
            
        // }
    };
    // 封装修改工时工资接口
    const amendEdit = async(i)=>{
        let params ={
            ids:  totalids.value ||selectedIds.value.join(','),
            schedule_id:schedule_id.value,
            // schedule_id:'164',
            salary : salary.value
        }
    const res = await sheep.$api.project.postScheduleUserEdit(params);
    if(res.code == 1){
        sheep.$helper.toast(res.msg);
        setTimeout(()=>{
            personnelsList.value = []
            page.value = 1
            allList.value = []
            schedule_userList();
            totalids.value = ''
            selectedIds.value = []
            checkAll.value = 0
            popshows.value = false
            salary.value = ''
        },500)
    }else{
        sheep.$helper.toast(res.msg);
    }
}

    // 取消按钮
    const cancel = () => {
        sheep.$router.back()
    }

</script>

<style scoped lang="scss">
    page {
        width: 100%;
        height: 100%;
    }

    // 版心
    .area {
        width: calc(100% - 40rpx);
        margin: 0 20rpx;
    }

    :deep(.u-form-item__body.data-v-b4fd400b) {
        padding: 20rpx 0 20rpx 30rpx;
    }

    :deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
        font-weight: $uni-font-weight;
    }

    :deep(.u-form-item__body__right__message.data-v-b4fd400b) {
        margin-left: 200rpx !important;
    }

    // 最大盒子
    .max-box {
        width: 100%;
    }

    // 头部盒子
    .top_box {
        height: 80rpx;
        background-color: #ffffff;
        padding: 20rpx 0;
    }

    // 空白盒子
    .blank_box {
        height: 100rpx;
        display: flex;
        margin: 28rpx auto 0 auto;
        align-items: center;

        .blank_box_btn {
            height: 70rpx;
            width: 100%;
            border-radius: 16rpx;
            background-color: #FFFFFF;
            box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: center;
            align-items: center;

            &:last-child {
                image {
                    width: 32rpx;
                    height: 28rpx;
                }
            }

            image {
                width: 30rpx;
                height: 30rpx;
            }

            view {
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: $uni-font-size-base;
                margin-left: 10rpx;
            }
        }
    }

    // 列表
    .add_area {
        border-radius: 16rpx;
        background-color: #FFFFFF;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
    }

    .scroll_box {
        height: 100%;
    }

    // 共计金额
    .Total_box {

        height: 104rpx;
        border-bottom: 2rpx solid #efefef;
        display: flex;
        align-items: center;
        justify-content: space-between;

        // 左侧
        .Total_box_left {
            display: flex;
            align-items: center;

            .Total_staff {
                font-family: PingFangSC;
                color: #000000;
                font-weight: 700;
                font-size: $uni-font-size-base;
                font-style: normal;
                text-decoration: none;

                text {
                    color: $uni-color-primary;
                }
            }
        }

        .Total_staff:first-child {
            margin-right: 20rpx;
            margin-left: 30rpx;
        }

        // 右侧
        .Total_box_right {
            display: flex;
            align-items: center;
            font-family: PingFangSC;
            color: $uni-color-primary;
            font-weight: 700;
            font-size: $uni-font-size-base;
            font-style: normal;
            text-decoration: none;
            margin-right: 30rpx;

            .image {
                width: 30rpx;
                height: 30rpx;
                margin-right: 10rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    // 列表项
    .list_item {
        height: 154rpx;
        display: flex;
        align-items: center;
        margin: 0 30rpx 40rpx 30rpx;
        position: relative;
        // &:last-child{
        //     margin-bottom: 0rpx !important;
        //     background-color: red;
        // }
        // 选择图标
        .select_image {
            width: 30rpx;
            height: 30rpx;
            margin-right: 22rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        // 头像盒子
        .head_box {
            width: 104rpx;
            height: 104rpx;

            image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

        // 信息盒子
        .message_box {
            margin-left: 20rpx;

            .message_title {
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
                font-size: 30rpx;
                font-style: normal;
                text-decoration: none;
                margin-bottom: 4rpx;
            }

            .message_identity {
                font-family: PingFangSC;
                color: #999999;
                font-weight: 400;
                font-size: $uni-font-size-sm;
                font-style: normal;
                text-decoration: none;
                margin-bottom: 10rpx;
            }

            .mes_flex{
                    display: flex;
                    height: 40rpx;
                    align-items: center;
                }
                .message_time {
                    font-family: PingFangSC;
                    color: $uni-text-color;
                    font-weight: 500;
                    font-size: $uni-font-size-sm;
                    font-style: normal;
                    text-decoration: none;
                    display: flex;
                    view{
                        margin-right: 15rpx;
                    }
                }
        }

        .add_right {
            position: absolute;
            top: 32rpx;
            right: 0;
            z-index: 1;
        }

        // 金额
        .gold_coin {
            width: 132rpx;
            height: 52rpx;
            padding-left: 10rpx;
            font-family: PingFangSC;
            color: $uni-color-primary;
            font-weight: 550;
            font-size: $uni-font-size-sm;
            font-style: normal;
            text-decoration: none;
            border-radius: 8rpx;
            text-align: center;
            line-height: 52rpx;
            background-color: #F9FBFF;
            border: 1rpx solid rgba(0, 56, 247, 0.3);
            box-shadow: 0 1rpx 8rpx 0 rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;

            image {
                width: 20rpx;
                height: 20rpx;
                margin-left: 10rpx;
            }
        }
        .yellow {
            background-size:30rpx 30rpx;
            background-position: 2rpx 50%;
            background-repeat: no-repeat;
            margin-top: 8rpx;
            line-height: 52rpx;
            width: 156rpx;
            height: 52rpx;
            border-radius: 8rpx;
            background-color: #FFFBF9;
            border: 1rpx solid rgba(247, 138, 0, 0.3);
            box-shadow: 0 1rpx 8rpx 0 rgba(0, 0, 0, 0.05);

            text {
                color: #F7AF00;
                margin-right: 6rpx;
            }
        }
    }

    .list_item:first-child {
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
        margin-top: 30rpx;
    }

    .list_item:last-child {
        border-bottom-left-radius: 16rpx;
        border-bottom-right-radius: 16rpx;
        margin-bottom: 0;
    }

    // 末尾盒子 (此盒子没有  “父相 ” 如要改动请按需更改)
    .end_box {
        position: fixed;
        bottom: 0;
        z-index: 98;
        height: 244rpx;
        width: 100%;

        // 全选按钮盒子
        .check_all_box {
            height: 80rpx;
            width: 100%;
            background-color: #ffffff;
            display: flex;
            justify-content: space-between;
            border: 2rpx solid #efefef;

            // 全选按钮
            .check_all_button {
                display: flex;
                margin-left: 52rpx;
                align-items: center;
                font-family: PingFangSC;
                color: #0239f7;
                font-weight: $uni-font-weight;
                font-size: $uni-font-size-base;
                font-style: normal;
                text-decoration: none;
            }

            // 已选择
            .selected_box {
                display: flex;
                margin-right: 40rpx;
                align-items: center;
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
                font-size: $uni-font-size-base;
                font-style: normal;
                text-decoration: none;
            }
        }

        // 占位盒子
        .placeholder {
            height: 32rpx;
            width: 100%;
            background-color: #ffffff;
        }
    }

    // 全选图标
    .select_image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 22rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    // 弹出层
    .popup_box {
        width: 600rpx;
        height: 590rpx;
        border-radius: 28rpx;
        background-color: #FFFFFF;
        position: relative;

        // 图标
        .image {
            position: absolute;
            left: 0;
            right: 0;
            top: -100rpx;
            margin: auto;
            width: 256rpx;
            height: 256rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        // 标题文字
        .popup_title {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 40rpx;
            font-style: normal;
            text-decoration: none;
            margin-top: 148rpx;
            margin-bottom: 68rpx;
            text-align: center;
        }

        // 输入框
        .popup_input {
            height: 96rpx;
            display: flex;
            align-items: center;
            border-radius: 28rpx;
            background-color: #F4F6FA;
            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
            margin: 0 40rpx;
            margin-bottom: 12rpx;

            .popup_symbol {
                margin-left: 20rpx;
            }
        }

        // 提示文本
        .hint_text {
            display: flex;
            align-items: center;
            height: 32rpx;
            font-family: PingFangSC;
            color: $uni-color-primary;
            font-weight: $uni-font-weight;
            font-size: 22rpx;
            font-style: normal;
            text-decoration: none;
            margin-bottom: 40rpx;

            .hint_image {
                width: 26rpx;
                height: 26rpx;
                margin-right: 10rpx;
                margin-left: 60rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        // 按钮集合
        .button_box {
            display: flex;

            .left_button {
                width: 50%;
                height: 82rpx;
                text-align: center;
                line-height: 82rpx;
                border-radius: 45rpx;
                border: 4rpx solid $uni-color-primary;
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: 34rpx;
                font-style: normal;
                text-decoration: none;
                margin-left: 40rpx;
                margin-right: 20rpx;
            }

            .right_button {
                width: 50%;
                height: 90rpx;
                text-align: center;
                line-height: 90rpx;
                border-radius: 45rpx;
                background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
                font-family: PingFangSC;
                color: #FFFFFF;
                font-weight: $uni-font-weight;
                font-size: 34rpx;
                font-style: normal;
                text-decoration: none;
                margin-right: 40rpx;
                margin-left: 20rpx;
            }
        }
    }

    // 执照员工代理商
    .list_item_title {
        padding-left: 30rpx;
        height: 60rpx;
        margin-top: 30rpx;
        display: flex;
        align-items: center;

        image {
            width: 30rpx;
            height: 30rpx;
        }

        .titlename {
            color: $uni-text-color;
            font-weight: 500;
           font-size:$uni-font-size-26;
            margin-left: 20rpx;
        }
    }
    :deep(.gold_coin ){
        .u-input--square{
            padding: 0 10rpx !important
        }   
    }
</style>